<template>
	<div class="my">
		<header>
			<div class="user-info" v-if="loginStatus">
				<img :src="userInfo.imgUrl" alt="">
				<span>{{userInfo.nickName}}</span>
			</div>
			<div v-else class="login" @click="goLogin">登录/注册</div>
			
		</header>
		<section>
			<ul>
				<li @click='goPath'>地址管理</li>
				<li v-if="loginStatus" @click="loginOut">退出登录</li>
			</ul>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	import Tabbar from '@/components/common/Tabbar.vue';
	export default{
		name:'My',
		components:{
			Tabbar
		},
		computed:{
			...mapState({
				loginStatus:state=>state.user.loginStatus,
				userInfo:state=>state.user.userInfo
			})
		},
		methods:{
			...mapMutations(['loginOut']),
			goLogin(){
				this.$router.push('/login');
			},
			//进入地址管理
			goPath(){
				this.$router.push('/path');
			}
		}
	}
</script>

<style scoped>
	.my{
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	header{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 4.266667rem;
		background-color: #b0352f;
	}
	header .user-info{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	header .user-info img{
		width: 1.76rem;
		height: 1.76rem;
		border-radius: 50%;
	}
	header .user-info span{
		padding: 0.533333rem 0;
		font-size: 0.48rem;
		color: #fff;
	}
	header .login{
		padding: 0.08rem 0.266667rem;
		font-size: 0.48rem;
		color: #fff;
		background-color: #f6ab32;
		border-radius: 6px;
	}
	section{
		flex: 1;
		overflow: hidden;
	}
	section ul li{
		padding: 0.4rem;
		font-size: 0.426667rem;
	}
</style>